<script setup lang="ts">
import { log } from '../ts/logger'
import { CanvasTools } from './canvas-esm/canvas-tools'
import { onMounted, onBeforeUnmount } from 'vue'
const props = defineProps({
  index: {
    type: Number,
    required: false,
    default: -1,
  },
})
let elcanvas: HTMLElement
onMounted(() => {
  log.debug('背景组件加载。。。')

  if (props.index == -1) {
    elcanvas = CanvasTools.randCanvas('.bg-div') as unknown as HTMLElement
  } else {
    elcanvas = CanvasTools.indexCanvas('.bg-div', props.index) as unknown as HTMLElement
  }
})
onBeforeUnmount(() => {
  log.debug('背景组件卸载。。。')
  elcanvas?.remove()
})
</script>

<template>
  <div class="bg-div"></div>
</template>

<style scoped lang="scss">
.bg-div {
  // background-color: #000;
  // color: #fff;
  position: fixed;
  z-index: -10000;
  width: 100vw;
  height: 100vh;
  top: 0px;
  left: 0px;
}
</style>
